<template>
  <div class="usage-records-section">
    <!-- 页面标题和搜索区域 -->
    <el-card class="header-card">
      <div class="header-content">
        <div class="title-section">
          <h2 class="page-title">用户使用记录</h2>
          <p class="page-subtitle">查看用户的使用历史记录</p>
        </div>
        <div class="search-section">
          <el-input
            v-model="searchKeyword"
            placeholder="搜索记录..."
            clearable
            style="width: 300px; margin-right: 10px;"
            @input="handleSearch"
          >
            <template #prefix>
              <el-icon><Search /></el-icon>
            </template>
          </el-input>
                     <el-button type="primary" @click="refreshData" :loading="loading">
             刷新数据
           </el-button>
           <el-button type="info" @click="showTypeDistribution" style="margin-left: 10px;">
             查看类型分布
           </el-button>
        </div>
      </div>
    </el-card>

    <!-- 统计信息卡片 -->
    <el-card class="stats-card" v-if="stats">
      <div class="stats-grid">
        <div class="stat-item">
          <div class="stat-value">{{ stats.totalRecords }}</div>
          <div class="stat-label">总记录数</div>
        </div>
        <div class="stat-item">
          <div class="stat-value">{{ stats.todayRecords }}</div>
          <div class="stat-label">今日记录</div>
        </div>
        <div class="stat-item">
          <div class="stat-value">{{ stats.thisWeekRecords }}</div>
          <div class="stat-label">本周记录</div>
        </div>
        <div class="stat-item">
          <div class="stat-value">{{ stats.thisMonthRecords }}</div>
          <div class="stat-label">本月记录</div>
        </div>
      </div>
    </el-card>

    <!-- 使用记录表格 -->
    <el-card class="records-card">
      <template #header>
        <div class="card-header">
          <span>使用记录列表</span>
                     <div class="header-actions">
                           <el-select v-model="filterType" placeholder="筛选类型" style="width: 120px; margin-right: 10px;" @change="handleFilter">
                <el-option label="全部" value="" />
                <el-option label="图片生成" value="1" />
                <el-option label="视频生成" value="2" />
                <el-option label="对话生成" value="3" />
              </el-select>
                         <el-select v-model="sortBy" placeholder="排序方式" style="width: 120px; margin-right: 10px;" @change="handleSort">
               <el-option label="时间倒序" value="time-desc" />
               <el-option label="时间正序" value="time-asc" />
               <el-option label="积分倒序" value="usage-desc" />
               <el-option label="积分正序" value="usage-asc" />
             </el-select>
          </div>
        </div>
      </template>
      
      <div class="table-container">
        <el-table 
          :data="paginatedRecords" 
          style="width: 100%"
          :max-height="500"
          v-loading="loading"
          stripe
        >
          <template #empty>
            <div class="empty-state">
              <el-icon size="48" color="#909399">
                <Document />
              </el-icon>
              <p>暂无使用记录</p>
            </div>
          </template>
          
          <el-table-column prop="id" label="记录ID" width="80" align="center" />
          
                     <el-table-column prop="type" label="使用类型" width="120" align="center">
             <template #default="{ row }">
               <el-tag :type="getTypeTag(row.type)" size="small">
                 {{ row.typeText || getTypeText(row.type) }}
               </el-tag>
             </template>
           </el-table-column>
           
                       <el-table-column prop="description" label="使用描述" min-width="200" show-overflow-tooltip>
              <template #default="{ row }">
                <div class="description-text">{{ row.prompt || row.title || '-' }}</div>
              </template>
            </el-table-column>
           
                       <el-table-column prop="usageAmount" label="生成结果" width="100" align="center">
              <template #default="{ row }">
                                 <div class="usage-image-container" v-if="row.resultUrl && row.type === 1">
                   <img 
                     :src="row.resultUrl" 
                     :alt="row.prompt || '使用结果'"
                     class="usage-image"
                     @error="handleUsageImageError"
                     @click="previewImage(row.resultUrl, row.prompt || row.title)"
                   />
                 </div>
                 <div class="usage-video-container" v-else-if="row.resultUrl && (row.type === 2 || isVideoUrl(row.resultUrl))">
                   <video 
                     :src="row.resultUrl" 
                     class="usage-video"
                     @error="handleUsageVideoError"
                     @click="openVideoInNewTab(row.resultUrl)"
                   />
                 </div>
                 <div class="usage-dialog-container" v-else-if="row.type === 3">
                   <div class="dialog-icon">💬</div>
                 </div>
                <span class="usage-amount" v-else>1</span>
              </template>
            </el-table-column>
           
           <el-table-column prop="cost" label="消耗积分" width="100" align="center">
             <template #default="{ row }">
               <span class="cost-amount">{{ row.pointsUsed || 0 }}</span>
             </template>
           </el-table-column>
           
           <el-table-column prop="status" label="状态" width="100" align="center">
             <template #default="{ row }">
               <el-tag :type="getStatusTag(row.status)" size="small">
                 {{ row.statusText || getStatusText(row.status) }}
               </el-tag>
             </template>
           </el-table-column>
          
          <el-table-column prop="createdTime" label="创建时间" width="180" align="center">
            <template #default="{ row }">
              {{ formatDateTime(row.createdTime) }}
            </template>
          </el-table-column>
          
          <el-table-column label="操作" width="120" align="center">
            <template #default="{ row }">
              <el-button type="primary" size="small" @click="viewDetail(row)">
                查看详情
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 分页组件 -->
      <div class="pagination-container" v-if="filteredRecords.length > 0">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="filteredRecords.length"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

         <!-- 详情对话框 -->
     <el-dialog 
       v-model="detailDialogVisible" 
       title="使用记录详情" 
       width="800px"
       class="detail-dialog"
       :close-on-click-modal="false"
     >
       <div v-if="selectedRecord" class="detail-content">
         <!-- 头部信息卡片 -->
         <div class="detail-header">
           <div class="header-left">
             <div class="record-id">
               <span class="id-label">#{{ selectedRecord.id }}</span>
             </div>
             <div class="record-type">
               <el-tag :type="getTypeTag(selectedRecord.type)" size="large" effect="dark">
                 {{ selectedRecord.typeText || getTypeText(selectedRecord.type) }}
               </el-tag>
             </div>
           </div>
           <div class="header-right">
             <div class="status-badge">
               <el-tag :type="getStatusTag(selectedRecord.status)" size="large" effect="dark">
                 {{ selectedRecord.statusText || getStatusText(selectedRecord.status) }}
               </el-tag>
             </div>
             <div class="time-info">
               <el-icon><Clock /></el-icon>
               <span>{{ formatDateTime(selectedRecord.createdTime) }}</span>
             </div>
           </div>
         </div>

         <!-- 主要内容区域 -->
         <div class="detail-main">
           <div class="main-grid">
             <!-- 左侧信息 -->
             <div class="info-section">
               <div class="section-title">
                 <el-icon><InfoFilled /></el-icon>
                 <span>基本信息</span>
               </div>
               
               <div class="info-grid">
                 <div class="info-item">
                   <div class="info-label">
                     <el-icon><Document /></el-icon>
                     <span>使用描述</span>
                   </div>
                   <div class="info-value description-text">
                     {{ selectedRecord.prompt || selectedRecord.title || '暂无描述' }}
                   </div>
                 </div>
                 
                 <div class="info-item">
                   <div class="info-label">
                     <el-icon><Coin /></el-icon>
                     <span>消耗积分</span>
                   </div>
                   <div class="info-value points-value">
                     <span class="points-number">{{ selectedRecord.pointsUsed || 0 }}</span>
                     <span class="points-unit">积分</span>
                   </div>
                 </div>
                 
                 <div class="info-item">
                   <div class="info-label">
                     <el-icon><Operation /></el-icon>
                     <span>使用量</span>
                   </div>
                   <div class="info-value">
                     <span class="usage-number">1</span>
                     <span class="usage-unit">次</span>
                   </div>
                 </div>
               </div>
             </div>

                           <!-- 右侧结果预览 -->
              <div class="result-section" v-if="selectedRecord.resultUrl">
                <div class="section-title">
                  <el-icon><Picture /></el-icon>
                  <span>生成结果</span>
                </div>
                
                                                  <!-- 视频预览 -->
                 <div v-if="selectedRecord.type === 2 || isVideoUrl(selectedRecord.resultUrl)" class="video-preview-container">
                   <video 
                     :src="selectedRecord.resultUrl" 
                     controls
                     class="preview-video"
                     @error="handleVideoError"
                   >
                     您的浏览器不支持视频播放
                   </video>
                   <div class="video-overlay">
                     <el-button type="primary" size="small" @click="openVideoInNewTab(selectedRecord.resultUrl)">
                       <el-icon><ZoomIn /></el-icon>
                       新窗口播放
                     </el-button>
                   </div>
                 </div>
                 
                 <!-- 对话预览 -->
                 <div v-else-if="selectedRecord.type === 3" class="dialog-preview-container">
                   <div class="dialog-preview-content">
                     <div class="dialog-icon-large">💬</div>
                     <div class="dialog-info">
                       <h4>对话内容</h4>
                       <p>{{ selectedRecord.prompt || selectedRecord.title || '暂无对话内容' }}</p>
                     </div>
                   </div>
                 </div>
                 
                 <!-- 图片预览 -->
                 <div v-else class="image-preview-container">
                   <img 
                     :src="selectedRecord.resultUrl" 
                     :alt="selectedRecord.prompt || '生成结果'"
                     class="preview-image"
                     @error="handleImageError"
                     @click="previewImage(selectedRecord.resultUrl, selectedRecord.prompt || selectedRecord.title)"
                   />
                   <div class="image-overlay">
                     <el-button type="primary" size="small" @click="previewImage(selectedRecord.resultUrl, selectedRecord.prompt || selectedRecord.title)">
                       <el-icon><ZoomIn /></el-icon>
                       放大查看
                     </el-button>
                   </div>
                 </div>
                
                <div class="url-info" v-if="selectedRecord.resultUrl">
                  <div class="url-label">
                    <el-icon><Link /></el-icon>
                    <span>结果链接</span>
                  </div>
                  <div class="url-value">
                    <el-input 
                      :value="selectedRecord.resultUrl" 
                      readonly 
                      size="small"
                      class="url-input"
                    >
                      <template #append>
                        <el-button 
                          type="primary" 
                          size="small"
                          @click="copyToClipboard(selectedRecord.resultUrl)"
                        >
                          复制
                        </el-button>
                      </template>
                    </el-input>
                  </div>
                </div>
              </div>
           </div>
         </div>
       </div>
       
       <template #footer>
         <div class="dialog-footer">
           <el-button @click="detailDialogVisible = false" size="large">
             <el-icon><Close /></el-icon>
             关闭
           </el-button>
         </div>
       </template>
     </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { 
  Document, 
  Search, 
  Clock, 
  InfoFilled, 
  Coin, 
  Operation, 
  Picture, 
  Link, 
  ZoomIn, 
  Close 
} from "@element-plus/icons-vue";
import usersapi from "../api/usersapi";

const props = defineProps({
  openid: {
    type: String,
    required: true
  }
});

// 响应式数据
const loading = ref(false);
const records = ref([]);
const stats = ref(null);
const currentPage = ref(1);
const pageSize = ref(20);
const searchKeyword = ref('');
const filterType = ref('');
const sortBy = ref('time-desc');
const detailDialogVisible = ref(false);
const selectedRecord = ref(null);

// 计算过滤后的数据
const filteredRecords = computed(() => {
  let result = records.value;
  
  // 搜索过滤
  if (searchKeyword.value) {
    result = result.filter(record => 
      record.prompt?.toLowerCase().includes(searchKeyword.value.toLowerCase()) ||
      record.title?.toLowerCase().includes(searchKeyword.value.toLowerCase()) ||
      record.type?.toString().includes(searchKeyword.value)
    );
  }
  
  // 类型过滤
  if (filterType.value) {
    result = result.filter(record => record.type == filterType.value);
  }
  
  // 排序
  result = [...result].sort((a, b) => {
    switch (sortBy.value) {
      case 'time-desc':
        return new Date(b.createdTime) - new Date(a.createdTime);
      case 'time-asc':
        return new Date(a.createdTime) - new Date(b.createdTime);
      case 'usage-desc':
        return (b.pointsUsed || 0) - (a.pointsUsed || 0);
      case 'usage-asc':
        return (a.pointsUsed || 0) - (b.pointsUsed || 0);
      default:
        return 0;
    }
  });
  
  return result;
});

// 计算分页后的数据
const paginatedRecords = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value;
  const end = start + pageSize.value;
  return filteredRecords.value.slice(start, end);
});

// 分页事件处理
const handleSizeChange = (val) => {
  pageSize.value = val;
  currentPage.value = 1;
};

const handleCurrentChange = (val) => {
  currentPage.value = val;
};

// 搜索处理
const handleSearch = () => {
  currentPage.value = 1;
};

// 过滤处理
const handleFilter = () => {
  currentPage.value = 1;
};

// 排序处理
const handleSort = () => {
  currentPage.value = 1;
};

// 获取类型标签颜色
const getTypeTag = (type) => {
  switch (type) {
    case 1: return 'success'; // 图片生成 - 绿色
    case 2: return 'danger';  // 视频生成 - 红色
    case 3: return 'info';    // 对话生成 - 灰色
    default: return 'info';
  }
};

// 获取类型文本
const getTypeText = (type) => {
  switch (type) {
    case 1: return '图片生成';
    case 2: return '视频生成';
    case 3: return '对话生成';
    default: return '未知';
  }
};

// 获取状态标签颜色
const getStatusTag = (status) => {
  switch (status) {
    case 1: return 'success'; // 成功
    case 0: return 'danger';  // 失败
    case 2: return 'warning'; // 处理中
    default: return 'info';
  }
};

// 获取状态文本
const getStatusText = (status) => {
  switch (status) {
    case 1: return '成功';
    case 0: return '失败';
    case 2: return '处理中';
    default: return '未知';
  }
};

// 格式化时间
const formatDateTime = (dateTime) => {
  if (!dateTime) return '-';
  
  try {
    const date = new Date(dateTime);
    if (isNaN(date.getTime())) {
      const parsedDate = new Date(dateTime.replace(/-/g, '/'));
      if (!isNaN(parsedDate.getTime())) {
        return formatDate(parsedDate);
      }
      return dateTime;
    }
    return formatDate(date);
  } catch (e) {
    console.error('格式化时间出错:', e);
    return dateTime;
  }
};

const formatDate = (date) => {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');
  const seconds = String(date.getSeconds()).padStart(2, '0');

  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
};

// 查看详情
const viewDetail = (record) => {
  selectedRecord.value = record;
  detailDialogVisible.value = true;
};

// 图片加载错误处理
const handleImageError = (event) => {
  console.error('图片加载失败:', event.target.src);
  event.target.style.display = 'none';
  // 可以显示一个错误提示
  const container = event.target.parentElement;
  if (container) {
    container.innerHTML = '<div class="image-error">图片加载失败</div>';
  }
};

// 使用量图片加载错误处理
const handleUsageImageError = (event) => {
  console.error('使用量图片加载失败:', event.target.src);
  event.target.style.display = 'none';
  // 显示默认的数字
  const container = event.target.parentElement;
  if (container) {
    container.innerHTML = '<span class="usage-amount">1</span>';
  }
};

// 判断是否为视频URL
const isVideoUrl = (url) => {
  if (!url) return false;
  const videoExtensions = ['.mp4', '.avi', '.mov', '.wmv', '.flv', '.webm', '.mkv'];
  return videoExtensions.some(ext => url.toLowerCase().includes(ext));
};

// 视频加载错误处理
const handleVideoError = (event) => {
  console.error('视频加载失败:', event.target.src);
  const container = event.target.parentElement;
  if (container) {
    container.innerHTML = '<div class="video-error">视频加载失败</div>';
  }
};

// 在新窗口打开视频
const openVideoInNewTab = (videoUrl) => {
  window.open(videoUrl, '_blank');
};

// 表格视频加载错误处理
const handleUsageVideoError = (event) => {
  console.error('表格视频加载失败:', event.target.src);
  event.target.style.display = 'none';
  // 显示默认的数字
  const container = event.target.parentElement;
  if (container) {
    container.innerHTML = '<span class="usage-amount">1</span>';
  }
};



// 预览图片
const previewImage = (imageUrl, title) => {
  ElMessageBox.alert(
    `<div style="text-align: center;">
       <img src="${imageUrl}" style="max-width: 100%; max-height: 400px; border-radius: 8px;" alt="${title}" />
       <p style="margin-top: 10px; color: #666;">${title}</p>
     </div>`,
    '图片预览',
    {
      dangerouslyUseHTMLString: true,
      confirmButtonText: '关闭',
      customClass: 'image-preview-dialog'
    }
  );
};

// 复制到剪贴板
const copyToClipboard = async (text) => {
  try {
    await navigator.clipboard.writeText(text);
    ElMessage.success('链接已复制到剪贴板');
  } catch (err) {
    // 降级方案
    const textArea = document.createElement('textarea');
    textArea.value = text;
    document.body.appendChild(textArea);
    textArea.select();
    document.execCommand('copy');
    document.body.removeChild(textArea);
    ElMessage.success('链接已复制到剪贴板');
  }
};

// 获取使用记录数据
const fetchUsageData = async () => {
  if (!props.openid) {
    ElMessage.error('缺少用户OpenID');
    return;
  }

  loading.value = true;
  
  try {
    // 首先尝试主要接口
    let response;
    try {
      response = await usersapi.getUserUsageRecords(props.openid);
    } catch (primaryError) {
      console.log('主要接口失败，尝试备用接口:', primaryError);
      // 如果主要接口失败，尝试备用接口
      response = await usersapi.getUserUsageRecordsBackup(props.openid);
    }
    
    if (response.data.code === 200) {
      const data = response.data.data;
      
      if (data) {
        // 根据API响应结构，数据可能在 data.data 中
        const actualData = data.data || data;
        
                 records.value = actualData.records || actualData.usageRecords || actualData || [];
        
        
        
        // 计算统计信息
        const today = new Date();
        const todayStr = today.toISOString().split('T')[0];
        
        const todayRecords = records.value.filter(record => 
          record.createdTime && record.createdTime.startsWith(todayStr)
        ).length;
        
        const thisWeekRecords = records.value.filter(record => {
          const recordDate = new Date(record.createdTime);
          const weekAgo = new Date();
          weekAgo.setDate(weekAgo.getDate() - 7);
          return recordDate >= weekAgo;
        }).length;
        
        const thisMonthRecords = records.value.filter(record => {
          const recordDate = new Date(record.createdTime);
          return recordDate.getMonth() === today.getMonth() && 
                 recordDate.getFullYear() === today.getFullYear();
        }).length;
        
        stats.value = {
          totalRecords: records.value.length,
          todayRecords,
          thisWeekRecords,
          thisMonthRecords
        };
        
        ElMessage.success('数据加载成功');
      } else {
        console.error('API返回的数据为空');
        ElMessage.error('API返回的数据为空');
      }
    } else {
      console.error('API返回错误:', response.data.msg);
      ElMessage.error(response.data.msg || '获取数据失败');
    }
  } catch (error) {
    console.error('获取使用记录失败:', error);
    console.error('错误详情:', error.response);
    
    // 更详细的错误信息
    if (error.response?.status === 404) {
      ElMessage.error('接口不存在，请检查后端是否实现了使用记录接口');
    } else if (error.response?.status === 500) {
      ElMessage.error('服务器内部错误，请检查后端日志');
    } else {
      ElMessage.error('获取使用记录失败: ' + (error.response?.data?.message || error.message));
    }
  } finally {
    loading.value = false;
  }
};

// 刷新数据
const refreshData = () => {
  fetchUsageData();
};

// 显示类型分布
const showTypeDistribution = () => {
  if (records.value.length === 0) {
    ElMessage.warning('暂无数据');
    return;
  }
  
  const typeDistribution = {};
  records.value.forEach(record => {
    const type = record.type;
    typeDistribution[type] = (typeDistribution[type] || 0) + 1;
  });
  
  const distributionText = Object.entries(typeDistribution)
    .map(([type, count]) => `类型${type}: ${count}条`)
    .join('\n');
  
  ElMessageBox.alert(
    `记录类型分布:\n\n${distributionText}`,
    '类型分布统计',
    {
      confirmButtonText: '确定'
    }
  );
};

// 组件挂载时获取数据
onMounted(() => {
  fetchUsageData();
});
</script>

<style scoped>
.usage-records-section {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.header-card {
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(25, 118, 210, 0.1);
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title-section {
  flex: 1;
}

.page-title {
  margin: 0 0 4px 0;
  font-size: 24px;
  font-weight: 600;
  color: #1976d2;
}

.page-subtitle {
  margin: 0;
  color: #666;
  font-size: 14px;
}

.search-section {
  display: flex;
  align-items: center;
}

.stats-card {
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(25, 118, 210, 0.1);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.stat-item {
  text-align: center;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e3f2fd;
  transition: all 0.3s ease;
}

.stat-item:hover {
  background: #e3f2fd;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(25, 118, 210, 0.2);
}

.stat-value {
  font-size: 28px;
  font-weight: bold;
  color: #1976d2;
  margin-bottom: 8px;
}

.stat-label {
  font-size: 14px;
  color: #666;
}

.records-card {
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(25, 118, 210, 0.1);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-actions {
  display: flex;
  align-items: center;
}

.table-container {
  margin-bottom: 20px;
}

.usage-amount {
  font-weight: bold;
  color: #1976d2;
}

.usage-image-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60px;
}

.usage-image {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  transition: all 0.3s ease;
}

.usage-image:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.usage-video-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60px;
}

.usage-video {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  transition: all 0.3s ease;
}

.usage-video:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.usage-dialog-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60px;
}

.dialog-icon {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f0f0f0;
  border-radius: 6px;
  font-size: 24px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.dialog-icon:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  background: #e0e0e0;
}

.cost-amount {
  font-weight: bold;
  color: #f44336;
}

.pagination-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 0;
  background: #fff;
  border-radius: 8px;
  margin-top: 16px;
  box-shadow: 0 2px 8px rgba(25, 118, 210, 0.1);
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  color: #909399;
}

.empty-state p {
  margin-top: 16px;
  font-size: 16px;
}

/* 详情对话框样式 */
:deep(.detail-dialog .el-dialog__header) {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 8px 8px 0 0;
  padding: 20px 24px;
}

:deep(.detail-dialog .el-dialog__title) {
  color: white;
  font-size: 18px;
  font-weight: 600;
}

:deep(.detail-dialog .el-dialog__headerbtn .el-dialog__close) {
  color: white;
  font-size: 18px;
}

:deep(.detail-dialog .el-dialog__body) {
  padding: 0;
}

:deep(.detail-dialog .el-dialog__footer) {
  padding: 20px 24px;
  border-top: 1px solid #f0f0f0;
  background: #fafafa;
}

.detail-content {
  padding: 0;
}

/* 头部信息样式 */
.detail-header {
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  padding: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #e8e8e8;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 20px;
}

.record-id .id-label {
  font-size: 24px;
  font-weight: 700;
  color: #1976d2;
  background: white;
  padding: 8px 16px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(25, 118, 210, 0.2);
}

.header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.time-info {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #666;
  font-size: 14px;
}

/* 主要内容区域 */
.detail-main {
  padding: 24px;
}

.main-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

/* 信息区域样式 */
.info-section, .image-section {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  border: 1px solid #f0f0f0;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: #1976d2;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid #e3f2fd;
}

.info-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.info-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.info-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: #666;
  font-weight: 500;
}

.info-value {
  font-size: 16px;
  color: #333;
  font-weight: 500;
}

.description-text {
  background: #f8f9fa;
  padding: 12px;
  border-radius: 8px;
  border-left: 4px solid #1976d2;
  line-height: 1.5;
}

.points-value {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.points-number {
  font-size: 24px;
  font-weight: 700;
  color: #f44336;
}

.points-unit {
  font-size: 14px;
  color: #666;
}

.usage-number {
  font-size: 24px;
  font-weight: 700;
  color: #1976d2;
}

.usage-unit {
  font-size: 14px;
  color: #666;
}

/* 图片预览区域 */
.image-preview-container {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  margin-bottom: 16px;
}

.preview-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.preview-image:hover {
  transform: scale(1.05);
}

.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.image-preview-container:hover .image-overlay {
  opacity: 1;
}

/* 视频预览区域 */
.video-preview-container {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  margin-bottom: 16px;
}

.preview-video {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 12px;
}

.video-overlay {
  position: absolute;
  top: 10px;
  right: 10px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.video-preview-container:hover .video-overlay {
  opacity: 1;
}

.video-error {
  color: #f44336;
  font-size: 14px;
  padding: 20px;
  text-align: center;
  background: #ffebee;
  border-radius: 8px;
  border: 1px solid #ffcdd2;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 对话预览区域 */
.dialog-preview-container {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  margin-bottom: 16px;
  background: #f8f9fa;
  border: 1px solid #e9ecef;
}

.dialog-preview-content {
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 200px;
}

.dialog-icon-large {
  font-size: 48px;
  color: #6c757d;
  flex-shrink: 0;
}

.dialog-info {
  flex: 1;
}

.dialog-info h4 {
  margin: 0 0 12px 0;
  color: #495057;
  font-size: 18px;
  font-weight: 600;
}

.dialog-info p {
  margin: 0;
  color: #6c757d;
  line-height: 1.6;
  font-size: 14px;
}

/* URL信息区域 */
.url-info {
  margin-top: 16px;
}

.url-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: #666;
  font-weight: 500;
  margin-bottom: 8px;
}

.url-input {
  width: 100%;
}

/* 对话框底部 */
.dialog-footer {
  display: flex;
  justify-content: flex-end;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .main-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .detail-header {
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
  }
  
  .header-right {
    align-items: flex-start;
  }
}



.image-error {
  color: #f44336;
  font-size: 14px;
  padding: 20px;
  text-align: center;
  background: #ffebee;
  border-radius: 8px;
  border: 1px solid #ffcdd2;
}

.description-text {
  font-size: 14px;
  color: #333;
}

/* 图片预览对话框样式 */
:deep(.image-preview-dialog .el-message-box__content) {
  padding: 20px;
}

:deep(.image-preview-dialog .el-message-box__message) {
  margin: 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .header-content {
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
  }
  
  .search-section {
    width: 100%;
    flex-direction: column;
    gap: 10px;
  }
  
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .card-header {
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
  }
  
  .header-actions {
    width: 100%;
    flex-direction: column;
    gap: 10px;
  }
}
</style> 